<template>

  <div>
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm login-container">
      <h3 class="title">系统登录</h3>
      <el-form-item label="帐号" prop="account">
        <el-input type="text" v-model="ruleForm2.account" autocomplete="off" placeholder="请输入帐号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
        <el-button type="primary" @click="regispre">注册</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
    title="注册"
    :visible.sync="showRegister">

      <el-form :inline="true" :model="registerBody" class="demo-form-inline">
        <el-tag>post请求：</el-tag>
        <el-form-item label="用戶名">
          <el-input v-model="registerBody.username" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="registerBody.password" placeholder="请输入爱好"></el-input>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="showRegister = false">取 消</el-button>
    <el-button type="primary" @click="registerSend">确 定</el-button>
  </span>

    </el-dialog>


  </div>




</template>

<script>
  import {login} from '../api/shuzhiCompare'
  import {register} from "../api/login";

  export default {
        name: "Login",
      data() {
        var validataAccount = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('帐号不能为空'));
          }else {
            callback()
          }

        };
        var validataPass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            callback();
          }
        };

        return {
          ruleForm2: {
            account: '',
            checkPass: '',
            registerBody:{
              username:'',
              password:'',
            },

          },
          rules2: {
            account: [
              { validator: validataAccount, trigger: 'blur',required:true }
            ],
            checkPass: [
              { validator: validataPass, trigger: 'blur',required:true }
            ],

          },
          showRegister:false,
          registerBody:{
            username:'',
            password:''
          }

        };
      },

      methods: {

        registerSend(){
          register(this.registerBody).then(res=>{
            const h = this.$createElement
            this.showRegister=false;
            this.$notify({
              title: '注册成功',
              message: h('i', { style: 'color: teal'}, `注册成功，${this.registerBody.username}`)
            });
          }).catch(err=>{
            const h = this.$createElement
            this.$notify({
              title: '注册失败',
              message: h('i', { style: 'color: teal'}, `注册失败，请重新发起`)
            });
          })
        },
        regispre(){
          this.showRegister = true
        },
        submitForm(formName) {

          //
          // this.$refs[formName].validate((valid) => {
          //   if (valid) {
          //     this.$router.push("/")
          //   } else {
          //     console.log('error submit!!');
          //     return false;
          //   }
          // });
          login(this.ruleForm2.account,this.ruleForm2.checkPass).then(res=>{

            localStorage.setItem("token",res.data.token)
            this.$router.push("/")
          })

        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }

    }
</script>

<style scoped lang="scss">
    .login-container{
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      background-clip: padding-box;
      margin: 180px auto;
      width: 350px;
      padding: 35px 35px 15px 35px;
      background: #fff;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;
      .title{
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
      }
      .remember {
        margin: 0px 0px 35px 0px;
      }
    }

</style>
